<!-- 使用 type="home" 属性设置首页 -->
<route type="home" lang="json">
{
  "style": { "navigationBarTitleText": "星座运势查询" },
  "name": "home"
}
</route>

<template>
  <view class="container">
    <!-- 标题区域 -->
    <view class="header">
      <view class="title">🌟 星座运势查询</view>
      <view class="subtitle">输入您的出生日期，查看今日运势</view>
    </view>

    <!-- 表单区域 -->
    <view class="form-container">
      <view class="form-group">
        <view class="label">选择出生日期</view>
        <picker 
          mode="date" 
          :value="birthDate" 
          @change="onDateChange"
          class="date-picker"
        >
          <view class="picker-display">
            {{ birthDate || '请选择日期' }}
          </view>
        </picker>
      </view>

      <button 
        class="query-btn" 
        @click="queryHoroscope"
        :disabled="!birthDate"
      >
        查看运势
      </button>
    </view>

    <!-- 结果区域 -->
    <view v-if="result" class="result-container">
      <view class="constellation-info">
        <view class="constellation-name">
          {{ result.constellation.symbol }} {{ result.constellation.name }}
        </view>
        <view class="date-range">{{ result.constellation.dateRange }}</view>
      </view>

      <view class="fortune-content">
        <view class="fortune-title">✨ 今日运势</view>
        <view class="fortune-text">{{ result.fortune }}</view>
      </view>

      <view class="tips">
        <text>💡 提示：运势仅供娱乐参考</text>
      </view>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading">
      <text>正在查询运势...</text>
    </view>

    <!-- 错误提示 -->
    <view v-if="error" class="error">
      <text>{{ error }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 响应式数据
const birthDate = ref('')
const result = ref(null)
const loading = ref(false)
const error = ref('')

// 星座数据
const constellations = [
  { name: '白羊座', symbol: '♈', start: { month: 3, day: 21 }, end: { month: 4, day: 19 }, dateRange: '3月21日 - 4月19日' },
  { name: '金牛座', symbol: '♉', start: { month: 4, day: 20 }, end: { month: 5, day: 20 }, dateRange: '4月20日 - 5月20日' },
  { name: '双子座', symbol: '♊', start: { month: 5, day: 21 }, end: { month: 6, day: 21 }, dateRange: '5月21日 - 6月21日' },
  { name: '巨蟹座', symbol: '♋', start: { month: 6, day: 22 }, end: { month: 7, day: 22 }, dateRange: '6月22日 - 7月22日' },
  { name: '狮子座', symbol: '♌', start: { month: 7, day: 23 }, end: { month: 8, day: 22 }, dateRange: '7月23日 - 8月22日' },
  { name: '处女座', symbol: '♍', start: { month: 8, day: 23 }, end: { month: 9, day: 22 }, dateRange: '8月23日 - 9月22日' },
  { name: '天秤座', symbol: '♎', start: { month: 9, day: 23 }, end: { month: 10, day: 23 }, dateRange: '9月23日 - 10月23日' },
  { name: '天蝎座', symbol: '♏', start: { month: 10, day: 24 }, end: { month: 11, day: 22 }, dateRange: '10月24日 - 11月22日' },
  { name: '射手座', symbol: '♐', start: { month: 11, day: 23 }, end: { month: 12, day: 21 }, dateRange: '11月23日 - 12月21日' },
  { name: '摩羯座', symbol: '♑', start: { month: 12, day: 22 }, end: { month: 1, day: 19 }, dateRange: '12月22日 - 1月19日' },
  { name: '水瓶座', symbol: '♒', start: { month: 1, day: 20 }, end: { month: 2, day: 18 }, dateRange: '1月20日 - 2月18日' },
  { name: '双鱼座', symbol: '♓', start: { month: 2, day: 19 }, end: { month: 3, day: 20 }, dateRange: '2月19日 - 3月20日' }
]

// 运势模板
const fortuneTemplates = {
  '白羊座': [
    '今天是展现领导力的好时机，勇敢地追求你的目标吧！',
    '充满活力的一天，适合开始新的项目或挑战。',
    '你的热情将感染身边的人，记得保持耐心。'
  ],
  '金牛座': [
    '稳扎稳打的态度会为你带来意想不到的收获。',
    '今天适合理财规划，审慎处理金钱相关事务。',
    '享受简单美好的事物，会让你心情愉悦。'
  ],
  '双子座': [
    '沟通能力出众的一天，多与他人交流想法。',
    '好奇心驱使你探索新领域，保持开放的心态。',
    '灵感迸发，适合创意类工作或学习。'
  ],
  '巨蟹座': [
    '家庭关系和谐，与亲人相处的时光特别温馨。',
    '直觉敏锐，相信自己的第六感会有好结果。',
    '情感丰富的一天，适合表达内心真实感受。'
  ],
  '狮子座': [
    '自信满满的你今天特别闪耀，容易成为焦点。',
    '创造力爆棚，展现你的才华和魅力吧！',
    '慷慨大方的举动会为你赢得更多朋友。'
  ],
  '处女座': [
    '注重细节的特质今天会派上大用场。',
    '完美主义倾向适度即可，不要过分苛求自己。',
    '整理和规划的好日子，让生活更有条理。'
  ],
  '天秤座': [
    '和谐的人际关系为你带来好运气。',
    '审美品味得到他人认可，适合艺术相关活动。',
    '平衡各方面需求，避免过度纠结于选择。'
  ],
  '天蝎座': [
    '深度思考和洞察力让你看透事物本质。',
    '神秘的魅力吸引他人注意，保持适度距离。',
    '直面内心深处的想法，诚实面对自己。'
  ],
  '射手座': [
    '冒险精神和乐观态度为你开启新机遇。',
    '学习新知识或技能的绝佳时机。',
    '旅行或远行计划会带来意外收获。'
  ],
  '摩羯座': [
    '务实的态度和坚持不懈会获得成功。',
    '事业方面有突破性进展，保持专注。',
    '责任感强的你会得到他人的信任和依赖。'
  ],
  '水瓶座': [
    '独特的想法和创新思维令人刮目相看。',
    '团队合作中你能发挥重要作用。',
    '关注社会议题，用行动表达你的理念。'
  ],
  '双鱼座': [
    '艺术天赋和想象力今天特别丰富。',
    '同情心和直觉力帮助你理解他人需求。',
    '梦想和现实找到平衡点，相信奇迹会发生。'
  ]
}

// 日期选择事件
const onDateChange = (e) => {
  birthDate.value = e.detail.value
  error.value = ''
}

// 计算星座
const getConstellation = (month, day) => {
  for (let constellation of constellations) {
    const { start, end } = constellation
    
    // 处理跨年的情况（摩羯座）
    if (start.month > end.month) {
      if ((month === start.month && day >= start.day) || 
          (month === end.month && day <= end.day)) {
        return constellation
      }
    } else {
      if ((month === start.month && day >= start.day) || 
          (month === end.month && day <= end.day) ||
          (month > start.month && month < end.month)) {
        return constellation
      }
    }
  }
  return null
}

// 生成随机运势
const generateFortune = (constellationName) => {
  const templates = fortuneTemplates[constellationName] || fortuneTemplates['白羊座']
  const randomIndex = Math.floor(Math.random() * templates.length)
  return templates[randomIndex]
}

// 查询运势
const queryHoroscope = () => {
  if (!birthDate.value) {
    error.value = '请选择出生日期'
    return
  }

  loading.value = true
  error.value = ''

  // 模拟异步查询
  setTimeout(() => {
    try {
      const date = new Date(birthDate.value)
      const month = date.getMonth() + 1
      const day = date.getDate()

      const constellation = getConstellation(month, day)
      
      if (!constellation) {
        error.value = '无法确定星座，请检查日期是否正确'
        loading.value = false
        return
      }

      const fortune = generateFortune(constellation.name)

      result.value = {
        constellation,
        fortune,
        queryDate: new Date().toLocaleDateString()
      }

      // 触觉反馈
      uni.vibrateShort()
      
    } catch (err) {
      error.value = '查询失败，请重试'
    } finally {
      loading.value = false
    }
  }, 800)
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  color: white;
}

.title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 14px;
  opacity: 0.9;
}

.form-container {
  background: white;
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

.label {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
  font-weight: 500;
}

.date-picker {
  width: 100%;
}

.picker-display {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  font-size: 16px;
  color: #495057;
}

.query-btn {
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
}

.query-btn:disabled {
  background: #ccc;
}

.result-container {
  background: white;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.constellation-info {
  text-align: center;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.constellation-name {
  font-size: 24px;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 5px;
}

.date-range {
  font-size: 14px;
  color: #666;
}

.fortune-content {
  margin-bottom: 20px;
}

.fortune-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.fortune-text {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.tips {
  text-align: center;
  font-size: 12px;
  color: #999;
}

.loading, .error {
  text-align: center;
  padding: 20px;
  background: white;
  border-radius: 15px;
  margin-bottom: 20px;
}

.error {
  color: #dc3545;
  background: #fff5f5;
  border: 1px solid #fed7d7;
}

.loading {
  color: #667eea;
}
</style>
